<script setup lang="ts">
import { goto } from '@/utils/comm'
import { reactive} from 'vue'
import {  useNotification  } from 'naive-ui'
import { _mylike } from '@/api/api'
import { useRequest } from 'alova'

const notification = useNotification()
 
const props = defineProps({
  item: {} as any,
  myliketags:[] as any
});

const open_detail= (item:any)=> {
  item.path = "/home/detail"
  goto(item)
}

const msg= (message:any)=> {
    notification['success']({
      content: message,
      duration: 1000,
      keepAliveOnHover: true
    })
}


const mylike_add= ()=> {
 
    const { onSuccess }  = useRequest(_mylike.mylike_add({
            pid: data.value, 
            id: props.item.id, 
            name:props.item.name,
            cover:props.item.cover,
            url:props.item.url,
            type:props.item.type,
            longs:props.item.longs,
            tags:props.item.tags
          }))
          onSuccess((res:any) => {
            console.log(res);
            let jmd = ''
            data.value.forEach(element => {
              jmd=jmd+"["+props.myliketags[element-1].label+"]";
            });
            msg("《"+props.item.name+'》加入'+jmd+'节目单')
          });  
 
  
}



const m_in = async () => {
  data.btn = true
  
}

// const m_out = async () => {
//   data.btn = false 
// }


const data =  reactive({
      value:[],
      btn:false
});

</script>

<template>
  <div class="card_new  animated fadeIn" :key="props.item.id"  @mousemove.native="m_in" @mouseover.native="m_in">
    <div class="tag">
      {{props.item.longs}}
      <span v-if="props.item.type==1">话</span>
    </div>
    <img  style="object-fit:cover" :src="props.item.cover" @click="open_detail(props.item)"  class="cover xiaoshou"  :style="props.item.type==1?'aspect-ratio: 1/1.3;':'aspect-ratio: 1/0.6;'" lazy  >
     <div class="title" > 
      <div class="title_l">{{props.item.name}}</div>
      <div class="title_r" v-show="props.item.type!=4">
      <n-popselect  v-if="data.btn" v-model:value="data.value" trigger="click" multiple :options="props.myliketags" size="small" show-arrow placement="bottom-start" @update:value="mylike_add()" >
        <n-button size="small" quaternary circle>+</n-button>
      </n-popselect>
      <span v-else style="margin-right: 9px;margin-top: 2px;display: block;">+</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped> 
  .card_new{
    text-align: center;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
    padding: 5px 5px;
    background-color: #4a4a4a7d;
    position: relative;
    .tag{
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
      border-radius: 3px;
      padding: 2px 3px;
      margin-top: 7px;
      margin-right: 7px;
      background-color: transparent;
      backdrop-filter: blur(40px);
      box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    }
    .cover{
      width: 100%;
      aspect-ratio: 1/0.6;
      border-radius: 5px;
    } 
    .title{
      height: 25px;
      line-height: 25px;
      display: flex;
      .title_l{
        overflow: hidden;
        font-size: 12px;
        text-overflow:ellipsis;
        white-space:nowrap;
        flex: 1;
        text-align: left;
      }
      .title_r{
        text-align: right;
         
        width: 20%;
      }
    }

  }
  

.light-mode { 
  .card_new{
    background-color: #e0dede7d;
  }
}
</style>